Skip to content

Fix Monaco editor custom theme colors not applied with oklch CSS variables#64281

Open
shashbha14 wants to merge 2 commits intoapache:mainfrom
shashbha14:fix/monaco-theme-oklch-hex
Open

Fix Monaco editor custom theme colors not applied with oklch CSS variables#64281
shashbha14 wants to merge 2 commits intoapache:mainfrom
shashbha14:fix/monaco-theme-oklch-hex

Conversation

@shashbha14
Copy link
Copy Markdown
Contributor

Closes #64253

The defineTheme function in Monaco expects #RRGGBB hex strings. The old cssVarToHex read back ctx.fillStyle after assignment, which in Firefox returns rgb(...) and in Chrome returns the raw oklch(...) string, both of which are silently rejected by Monaco, resulting in the default vs or vs-dark themes.

Fix: fillRect with getImageData pixel extraction to correctly convert any CSS color format, including oklch values from Chakra UI.

@boring-cyborg boring-cyborg bot added area:translations area:UI Related to UI/UX. For Frontend Developers. translation:default labels Mar 27, 2026
@shashbha14 shashbha14 force-pushed the fix/monaco-theme-oklch-hex branch 2 times, most recently from c65bd44 to 08d9439 Compare March 27, 2026 09:05
@shashbha14 shashbha14 force-pushed the fix/monaco-theme-oklch-hex branch from 08d9439 to 07ac3f9 Compare March 27, 2026 09:11
@shivaam
Copy link
Copy Markdown
Contributor

shivaam commented Mar 27, 2026

I dont think you should open new PRs to address the feedback on the previous PR. You can just the branvh with your changes as the review comments get lost.

Feedback PR:

#64268

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

area:translations area:UI Related to UI/UX. For Frontend Developers. translation:default

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Rework style for the monaco-editor

2 participants